<template>
  <div class="collect">
    <div class="user-com-title">我的收藏</div>
    <ul>
      <li v-for="(item, index) in list" :key="index">
        <div class="hd">
          <div class="img-box"><img :src="item.image" alt="" /></div>
          <div class="info line2">{{ item.store_name }}</div>
        </div>
        <div class="bd">
          <el-button @click="offCollect(item)">取消收藏</el-button>
          <el-button @click="goDetail(item)">查看商品</el-button>
        </div>
      </li>
    </ul>
    <div class="pages-box" v-if="total > 0">
      <el-pagination
        background
        layout="prev, pager, next"
        @current-change="bindPageCur"
        :total="total"
      >
      </el-pagination>
    </div>
    <div class="empty-box" v-if="list.length == 0">
      <img src="~assets/images/nocollect.png" alt="" />
      <p>親，暂無收藏哟~</p>
    </div>
  </div>
</template>

<script>
import { Message } from "element-ui";
export default {
  name: "collect",
  auth: "guest",
  data() {
    return {
      list: [],
      page: 1,
      limit: 10,
      total: 0,
    };
  },
  fetch({ store }) {
    store.commit("isHeader", true);
    store.commit("isFooter", true);
  },
  head() {
    return {
      title: "我的收藏-" + this.$store.state.titleCon,
    };
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      window.scrollTo(0, 0);
      document.documentElement.scrollTop = 0;
      document.body.scrollTop = 0;
      setTimeout(() => {
        window.scrollTo(0, 0);
      }, 50);
    });
    this.getList();
  },
  methods: {
    getList() {
      this.$axios
        .get("pc/get_collect_list", {
          params: {
            page: this.page,
            limit: this.limit,
          },
        })
        .then((res) => {
          this.list = res.data.list;
          this.total = res.data.count;
        });
    },
    //取消收藏
    offCollect(item) {
      this.$axios
        .post("collect/del", {
          id: item.product_id,
        })
        .then((res) => {
          Message.success(res.msg);
          this.getList();
        })
        .catch((error) => {
          return Message.error(error);
        });
    },
    //去詳情
    goDetail(item) {
      let path = item.presale
        ? (path = {
            path: "/goods_presell_detail",
            query: {
              id: item.product_id,
            },
          })
        : (path = { path: `/goods_detail/${item.product_id}` });
      this.$router.push(path);
    },
    // 分页点击
    bindPageCur(data) {
      this.page = data;
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
.collect {
  .user-com-title {
    color: $ivory;
  }
  ul {
    li {
      padding: 30px 5px;
      border-bottom: 1px solid $slate;

      .hd {
        display: flex;
        padding-bottom: 30px;
        border-bottom: 1px dashed $slate;

        .img-box {
          width: 120px;
          height: 120px;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .info {
          display: flex;
          align-items: center;
          margin-left: 25px;
          width: 60%;
        }
      }

      .bd {
        display: flex;
        justify-content: flex-end;
        padding-top: 25px;
        padding-right: 25px;
      }
    }
  }
}

.pages-box {
  margin-top: 30px;
  text-align: right;

  ::v-deep .el-pagination {
    .el-pager li.active {
      background-color: $obsidian;
      border-color: $obsidian;
      color: $pure-white;
    }

    .btn-prev,
    .btn-next,
    .btn-prev:hover,
    .btn-next:hover,
    .el-icon-arrow-left,
    .el-icon-arrow-right,
    .el-icon-arrow-left:hover,
    .el-icon-arrow-right:hover {
      color: $obsidian;
    }

    .el-pager li:hover {
      color: $obsidian;
    }

    .el-pager li.number.active {
      background-color: $obsidian;
      border-color: $obsidian;
      color: $pure-white;
    }
  }
}
</style>
